<template>

  <div class="flex adjustment-box">
    <!-- 选择调整方式 -->
    <el-select size="small" v-model="justType" class="type-box">
      <el-option label="调整至" :value="'adjustment'"></el-option>
      <el-option label="提高" :value="'up'"></el-option>
      <el-option label="提高%" :value="'up%'"></el-option>
      <el-option label="降低" :value="'down'"></el-option>
      <el-option label="降低%" :value="'down%'"></el-option>
    </el-select>
    <!-- 输入调整值 -->
    <div class="input-box flex">
      <el-input-number v-model="popoNunmber" :controls="false" size="small" @keyup.native.enter="handlerSub" />
      <span class="input-icon">{{inputIcon}}</span>
    </div>

    <el-button type="success" size="small" @click="handlerSub" style="width: 76px;">保存</el-button>
    <em style="margin-left:12px;" @click="handlerCancel" class="pointer"> 取消</em>

  </div>
</template>
<script>
  export default {
    name: '', // ·������
    data() {
      return {
        justType: 'adjustment',
        popoNunmber: undefined,
        msgBox: undefined
      }
    },
    computed: {
      inputIcon() {
        if (this.justType.indexOf('%') !== -1) {
          return '%'
        } else {
          let unit = this.$store.state.user.unit;
          return unit === "USD" ? '$' : '￥'
        }
      }
    },
    watch: {
      // obj: { //�����Ķ���
      //   deep: true, //���ȼ�������Ϊ true
      //   // ������wacth��������firstName��������֮��������ȥִ��handler����
      //       immediate: true
      //   handler: function(newV, oldV) {
      //     console.log('watch�У�', newV)
      //   }
      // }
    },
    // ������
    created() {},
    // ���غ�
    mounted() {

    },
    // ���ٺ�
    destroyed() {

    },

    // ����
    methods: {

      reset() {
        this.justType = 'adjustment'
        this.popoNunmber = undefined
      },
      /* 点击了保存  提交按钮*/
      handlerSub() {
        if (!this.popoNunmber || this.popoNunmber === undefined || this.popoNunmber === '' || this.popoNunmber <= 0) {
          this.msgBox && this.msgBox.close();
          this.msgBox = this.$message({
            message: '请填写您的调整出价且必须至少为0.01',
            type: 'warning'
          });
          return false;
        } else if (this.popoNunmber >= 100 && this.justType === 'down%') {
          this.msgBox && this.msgBox.close();
          this.msgBox = this.$message({
            message: `降低最大值不能${this.popoNunmber==100?'为':'超过'}100%`,
            type: 'warning'
          });
          return false;
        } else {
          this.$emit('handlerSub', {
            type: this.justType,
            num: this.popoNunmber
          })
        }



      },
      /* 点击了取消按钮*/
      handlerCancel() {
        this.popoNunmber = undefined;
        this.justType = 'adjustment'
        this.$emit('handlerCancel')
      },
    }
  }
</script>

<style scoped lang="scss">
  .adjustment-box {
    .type-box {
      width: 100px;
    }

    .input-box {
      width: 163px;
      margin: 0 12px;
      border-radius: 2px;
      border: 1px solid #E0E2E7;

      .input-icon {
        display: inline-block;
        width: 36px;
        height: 32px;
        font-size: 12px;
        line-height: 32px;
        color: rgba(51, 64, 74, 0.8);
        text-align: center;
        border-left: 1px solid #E0E2E7;
      }

      /deep/.el-input {
        flex: 1 !important;
      }

      /deep/ .el-input__inner {
        border: none !important;
      }
    }
  }
</style>
